<template>
  <el-card class="box-card">
    <itable
    :table="tconfig1.tableConfig"
    :tableData="tconfig1.tableData"
    :showform="false"
    :page-bean="tconfig1.pageBean"
    @pageChange="pageChange"
    @handleEdit="handleEdit"
    @handleDel="handleDel"
    >
      <template #check_status="prop"><span :style="{color: prop.obj.row.check_status==1 ? '#67C23A' : '#F56C6C'}">{{ prop.obj.row.check_status==1?'已执行':'未执行' }}</span></template>
      <template #id="prop">
        <el-button :disabled="prop.obj.row.check_status==1" @click="handleEdit(prop.obj.row)">编辑</el-button>
        <el-button type="danger" @click="handleDel(prop.obj.row)">删除</el-button>
      </template>
      <template #headerbtn>
        <el-alert type="info" show-icon :closable="false">
          <p>当您需要分配某职位进行突击安全检查时，请使用此功能安排检查日程</p>
        </el-alert>
        <el-button type="primary" plain @click="clickadd" icon="Plus">添加</el-button>
      </template>
    </itable>

    <el-dialog
    :title="title == 0?'新增':'编辑'"
    v-model="dialogVisible"
    :before-close="handleClose"
    width="40%">
      <Eform
          :model="dform"
          :rules="drules"
          :elem="dfromData"
          btnSize="large"
          :submit="false"
          :reset="false"
          :button="false"
          ref="ruleFormRef"
          labelPosition="right"
        >
      </Eform>
    <template #footer>
      <span class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickComfig">保 存</el-button>
      </span>
  </template>
  </el-dialog>
  </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import Eform from '@/components/eform/index.vue';
import { ElMessageBox } from 'element-plus'
import useCurrentInstance from '@/utils/useCurrentInstance'

const { proxy } = useCurrentInstance()
let option = ref([])
let title = ref(0)
let dialogVisible = ref(false)
let ruleFormRef = ref()
let fromData = reactive([
  {
    label: "员工姓名",
    prop: "deviceName",
    clearable: true,
  },
  {
    label: "联系方式",
    prop: "factoryName",
    clearable: true,
  }
])
let form = reactive({
  deviceName:'',
  factoryName:''
})
const disabledDate = (time:Date) => {
  return time.getTime() > Date.now() + (1 * 24 * 60 * 60 * 1000)
}
let dfromData = reactive([
  {
    label: "职位",
    prop: "position_id",
    element:'select',
    option:option,
    optlabel:'name',
    optvalue:'id',
    clearable: true,
  },
  {
    label: "计划执行日期",
    prop: "check_date",
    element:'date',
    type:"date",
    format:'YYYY-MM-DD',
    labelWidth:'120px',
    clearable: true,
  },
])
let drules = reactive({
  position_id:[
    { required: true, message: '请选择职位', trigger: 'blur' },
  ],
  check_date:[
    { required: true, message: '请选择计划执行日期', trigger: 'blur' },
  ]
})
let dform = reactive({
  position_id:'',
  check_date:''
})
const tconfig1 = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [] as any[],
  pageBean: new PageBean(10, 1, 0),
})

// 新增
const clickadd = () => {
  title.value = 0
  dialogVisible.value = true
}

// 弹框-提交
const clickComfig = () => {
  ruleFormRef.value.validate().then(flag => {
    if(flag){
      if(title.value == 0){
        proxy.$api.getPositionAssaultadd(dform).then(res => {
          if(res.code == 200){
            proxy.$message({
              type:'success',
              message:res.msg
            })
            getPositionAssault()
            dialogVisible.value = false
          }
        })
      }else{
        proxy.$api.getPositionAssaultedit(dform).then(res => {
          if(res.code == 200){
            proxy.$message({
              type:'success',
              message:res.msg
            })
            getPositionAssault()
            dialogVisible.value = false
          }
        })
      }
    }
  })
}
// 弹框-取消
const clickCancel = () => {
  dform.check_date = ''
  dform.position_id = ''
  dialogVisible.value = false
}
const handleClose = () => {
  dform.check_date = ''
  dform.position_id = ''
  dialogVisible.value = false
}
// 表格-编辑
const handleEdit = (b) => {
  title.value = 1
  dform.check_date = b.check_date
  dform.position_id = 7
  dform.assault_id = b.id
  dialogVisible.value = true
}
// 表格-删除
const handleDel = (b) => {
  ElMessageBox.confirm(
    '此操作将永久删除该数据,是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    proxy.$api.getPositionAssaultdel({id:b.id}).then(res => {
      if(res.code == 200){
          proxy.$message({
            type: 'success',
            message: res.msg,
          })
          getPositionAssault()
        }
    })
  })
  .catch(() => {
    proxy.$message({
      type: 'info',
      message: '已取消删除',
    })
  })
}

// 分页
const pageChange = () => {

}

// 检查列表
const getPositionAssault = () => {
  tconfig1.tableConfig.loading = true
  proxy.$api.getPositionAssault().then(res => {
    // tconfig1.pageBean.Total = res.result.total_rows,
    tconfig1.tableData = res.result
    tconfig1.tableConfig.loading = false
  }).catch(err => { tconfig1.tableConfig.loading = false })
}
getPositionAssault()
// 获取职位列表
const getPositionLists = () => {
  proxy.$api.getPositionSelect({select_type:'1'}).then(res => {
    option.value = res.result
  }).catch(err => console.log(err))
}
getPositionLists()
// 初始化表格
const initTable = () => {
  tconfig1.tableConfig = {
  loading: true,
  hasSelect: false,
  hasIndex: true,
  hasOperation: false,
  hasSearch: true,
  hasPage: false,
  headerShowBtn:true,
  tr: [
    {
      label: "职位名称",
      prop: "position",
    },
    {
      label: "执行日期",
      prop: "check_date",
    },
    {
      label: "状态",
      prop: "check_status",
      show:'template'
    },
    {
      label: "操作",
      width:'330',
      fixed:'right',
      prop: "id",
      show:'template'
    }
  ],
  operation:{
    label:'操作',
    width:'330',
    data:[
      { label:'编辑', type:'', icon:'EditPen', Fun:'handleEdit', id: 1 },
      { label:'删除', type:'danger',icon:'Delete', Fun:'handleDel', id: 2 },
    ]
  }
}
}
initTable()
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
.el-form>.el-form-item{
  // width: 60%;
  margin-bottom: 20px;
  margin-left: 10px;
}
.el-select{
  width: 100%;
}
}
.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
}
.el-alert{
  background-color: rgba(255, 255, 255, 0) !important;
}
</style>
